<template>
  <el-dialog v-model="dialogVisible" title="Tips" width="50%">
    <div class="wrapper">
      <div class="container">
        <div id="seat-map">
          <div
            class="front-indicator"
            :class="{ active: !shippingSpaceFlag }"
            @click="changeOfShippingSpace"
          >
            {{ shippingSpaceFlag ? '经济舱' : '头等舱' }}
          </div>
          <ul class="airplane-seat">
            <li class="airplane-seat-number">
              <div
                class="airplane-seat-number__string-seat-number"
                v-for="(item, index) in seatNumber"
                :key="index"
              >
                {{ item }}
              </div>
            </li>
            <li
              class="airplane-seat-number"
              v-for="item in seat"
              :key="item.id"
            >
              <div class="airplane-seat-number__id">{{ item.id }}</div>
              <div
                class="airplane-seat-number__string"
                @click="choose(item, index)"
                :class="{
                  theShippingSpace: string === 'e' || string === 'f',
                  cargoReservation: string === 'o',
                  selectedShippingSpace: saveSelectYourSeat.includes(
                    `${item.id}${index}${item.layout[index]}`
                  ),
                }"
                v-for="(string, index) in item.layout"
              ></div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 详情 -->
      <ul class="introduce">
        <li class="introduce__wei">您所选择的座位为:</li>
        <li
          class="introduce__location"
          v-for="item in selectYourSeat"
          :key="item.id"
        >
          {{
            `${shippingSpaceFlag ? '经济舱' : '头等舱'}${item.layout.substring(
              0,
              item.layout.length - 2
            )}行${
              seatNumber[Number(item.layout[String(item.id).length]) + 1]
            }列`
          }}
        </li>
        <li>
          <el-button class="introduce__location-button" type="primary"
            >确定</el-button
          >
        </li>
        <li
          class="introduce_select"
          v-for="(item, index) in seatDetails"
          :key="index"
        >
          <img :src="item.img" alt="" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelBtn">取消</el-button>
        <el-button type="primary" @click="btnClick"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-button @click="openForm" type="primary">点击</el-button>
</template>

<script setup>
import { ref, watch } from 'vue'
// 判断是否是经济舱还是头等舱
const shippingSpaceFlag = ref(true)
// 座位编号
const seatNumber = ref(['', 'A', 'B', '', 'C', 'D', 'E', 'F', '', 'G', 'H'])
// 选中座位
const selectYourSeat = ref([])
const dialogVisible = ref(false)
// 座位票
const seatTicket = ref(2)
// ‘e’选舱‘o’已预定‘_’走廊
const seat = ref([
  {
    id: 1,
    layout: 'ee______ee',
  },
  {
    id: 2,
    layout: 'ee______ee',
  },
  {
    id: 3,
    layout: 'ee_eeee_ee',
  },
  {
    id: 4,
    layout: 'oe_eeee_ee',
  },
  {
    id: 5,
    layout: 'ee_eeee_ee',
  },
  {
    id: 6,
    layout: 'ee_eeee_ee',
  },
  {
    id: 7,
    layout: 'oo_eeee_ee',
  },
  {
    id: 8,
    layout: 'ee_eeee_ee',
  },
  {
    id: 9,
    layout: 'eo_eeee_ee',
  },
  {
    id: 10,
    layout: 'ee_eeee_ee',
  },
  {
    id: 11,
    layout: 'ee_eeee_ee',
  },
  {
    id: 12,
    layout: 'ee_eeee_ee',
  },
  {
    id: 13,
    layout: 'ee_eeee_ee',
  },
  {
    id: 14,
    layout: 'ee_eeee_ee',
  },
  {
    id: 15,
    layout: 'ee_eeee_ee',
  },
  {
    id: 16,
    layout: 'ee_eeee_ee',
  },
  {
    id: 17,
    layout: 'ee_eeee_ee',
  },
  {
    id: 18,
    layout: 'ee_eeee_ee',
  },
  {
    id: 19,
    layout: 'ee_eeee_ee',
  },
  {
    id: 20,
    layout: 'ee_eeee_ee',
  },
  {
    id: 21,
    layout: 'ee_eeee_ee',
  },
  {
    id: 22,
    layout: 'ee_eeee_ee',
  },
  {
    id: 23,
    layout: 'ee_eeee_ee',
  },
  {
    id: 24,
    layout: 'ee_eeee_ee',
  },
  {
    id: 25,
    layout: 'ee_eeee_ee',
  },
  {
    id: 26,
    layout: 'ee_eeee_ee',
  },
  {
    id: 27,
    layout: 'ee_eeee_ee',
  },
  {
    id: 28,
    layout: 'ee_eeee_ee',
  },
  {
    id: 29,
    layout: 'ee_eeee_ee',
  },
  {
    id: 30,
    layout: 'ee_eeee_ee',
  },
  {
    id: 31,
    layout: 'ee_eeee_ee',
  },
])
// 保存数据
const saveSelectYourSeat = ref([])
// 已被选中的座位
const hasBeenSelectedSeat = ref([])
// 点击机头更换舱位
const changeOfShippingSpace = () => {
  shippingSpaceFlag.value = !shippingSpaceFlag.value
  if (shippingSpaceFlag.value) {
    seat.value = [
      {
        id: 1,
        layout: 'ee______ee',
      },
      {
        id: 2,
        layout: 'ee______ee',
      },
      {
        id: 3,
        layout: 'ee_eeee_ee',
      },
      {
        id: 4,
        layout: 'oe_eeee_ee',
      },
      {
        id: 5,
        layout: 'ee_eeee_ee',
      },
      {
        id: 6,
        layout: 'ee_eeee_ee',
      },
      {
        id: 7,
        layout: 'oo_eeee_ee',
      },
      {
        id: 8,
        layout: 'ee_eeee_ee',
      },
      {
        id: 9,
        layout: 'eo_eeee_ee',
      },
      {
        id: 10,
        layout: 'ee_eeee_ee',
      },
      {
        id: 11,
        layout: 'ee_eeee_ee',
      },
      {
        id: 12,
        layout: 'ee_eeee_ee',
      },
      {
        id: 13,
        layout: 'ee_eeee_ee',
      },
      {
        id: 14,
        layout: 'ee_eeee_ee',
      },
      {
        id: 15,
        layout: 'ee_eeee_ee',
      },
      {
        id: 16,
        layout: 'ee_eeee_ee',
      },
      {
        id: 17,
        layout: 'ee_eeee_ee',
      },
      {
        id: 18,
        layout: 'ee_eeee_ee',
      },
      {
        id: 19,
        layout: 'ee_eeee_ee',
      },
      {
        id: 20,
        layout: 'ee_eeee_ee',
      },
      {
        id: 21,
        layout: 'ee_eeee_ee',
      },
      {
        id: 22,
        layout: 'ee_eeee_ee',
      },
      {
        id: 23,
        layout: 'ee_eeee_ee',
      },
      {
        id: 24,
        layout: 'ee_eeee_ee',
      },
      {
        id: 25,
        layout: 'ee_eeee_ee',
      },
      {
        id: 26,
        layout: 'ee_eeee_ee',
      },
      {
        id: 27,
        layout: 'ee_eeee_ee',
      },
      {
        id: 28,
        layout: 'ee_eeee_ee',
      },
      {
        id: 29,
        layout: 'ee_eeee_ee',
      },
      {
        id: 30,
        layout: 'ee_eeee_ee',
      },
      {
        id: 31,
        layout: 'ee_eeee_ee',
      },
    ]
    seatNumber.value = ['', 'A', 'B', '', 'C', 'D', 'E', 'F', '', 'G', 'H']
  } else {
    seat.value = [
      {
        id: 1,
        layout: 'ee______ee',
      },
      {
        id: 2,
        layout: 'ee______ee',
      },
      {
        id: 3,
        layout: 'ee______ee',
      },
      {
        id: 4,
        layout: 'ee______ee',
      },
      {
        id: 5,
        layout: 'ee______ee',
      },
      {
        id: 6,
        layout: 'ee______ee',
      },
      {
        id: 7,
        layout: 'ee______ee',
      },
      {
        id: 8,
        layout: 'ee______ee',
      },
      {
        id: 9,
        layout: 'ee______ee',
      },
      {
        id: 10,
        layout: 'ee______ee',
      },
      {
        id: 11,
        layout: 'ee______ee',
      },
      {
        id: 12,
        layout: 'ee______ee',
      },
      {
        id: 13,
        layout: 'ee______ee',
      },
      {
        id: 14,
        layout: 'ee______ee',
      },
      {
        id: 15,
        layout: 'ee______ee',
      },
      {
        id: 16,
        layout: 'ee______ee',
      },
      {
        id: 17,
        layout: 'ee______ee',
      },
      {
        id: 18,
        layout: 'ee______ee',
      },
      {
        id: 19,
        layout: 'ee______ee',
      },
      {
        id: 20,
        layout: 'ee______ee',
      },
      {
        id: 21,
        layout: 'ee______ee',
      },
      {
        id: 22,
        layout: 'ee______ee',
      },
      {
        id: 23,
        layout: 'ee______ee',
      },
      {
        id: 24,
        layout: 'ee______ee',
      },
      {
        id: 25,
        layout: 'ee______ee',
      },
      {
        id: 26,
        layout: 'ee______ee',
      },
      {
        id: 27,
        layout: 'ee______ee',
      },
      {
        id: 28,
        layout: 'ee______ee',
      },
      {
        id: 29,
        layout: 'ee______ee',
      },
      {
        id: 30,
        layout: 'ee______ee',
      },
      {
        id: 31,
        layout: 'ee______ee',
      },
    ]
    seatNumber.value = ['', 'A', 'B', '', '', '', '', '', '', 'C', 'D']
  }
  selectYourSeat.value = []
  saveSelectYourSeat.value = []
}
// 座位详情
const seatDetails = ref([
  {
    img: require('@/assets/image/05b1eadc36271b1b0f5302e789ab025.jpg'),
    name: '已选中',
  },
  {
    img: require('@/assets/image/423349728e7bcc7494a99908c0d0e4f.jpg'),
    name: '未选中',
  },
  {
    img: require('@/assets/image/59deb2f081224d53c935d96b22c0572.jpg'),
    name: '已预定',
  },
])
// 选择座位
const choose = (obj, index) => {
  saveSelectYourSeat.value = []
  // 选中座位唯一标志
  let UniqueMark = {
    id: obj.id,
    layout: `${obj.id}${index}${obj.layout[index]}`,
  }
  if (obj && !hasBeenSelectedSeat.value.includes(UniqueMark.layout)) {
    if (
      selectYourSeat.value.find((item) => item.layout === UniqueMark.layout)
    ) {
      selectYourSeat.value.splice(
        selectYourSeat.value.findIndex(
          (item) => item.layout === UniqueMark.layout
        ),
        1
      )
    } else if (seatTicket.value > selectYourSeat.value.length) {
      selectYourSeat.value.push(UniqueMark)
    } else if (seatTicket.value <= selectYourSeat.value.length) {
      selectYourSeat.value.shift()
      selectYourSeat.value.push(UniqueMark)
    }
  }
  selectYourSeat.value.forEach((item) => {
    saveSelectYourSeat.value.push(item.layout)
  })
}
// 点击打开表单
const openForm = () => {
  dialogVisible.value = true
}
const cancelBtn = () => {
  dialogVisible.value = false
}
const btnClick = () => {
  dialogVisible.value = false
}
watch(
  seat.value,
  () => {
    seat.value.forEach((item) => {
      let index = 0
      for (let i of item.layout) {
        index++
        if (i === 'o') {
          hasBeenSelectedSeat.value.push(
            `${item.id}${index - 1}${item.layout[index - 1]}`
          )
        }
      }
    })
  },
  // () => {
  //   let count = ref(0)
  //   hasBeenSelectedSeat.value = []
  //   rowColSit.value = []
  //   seat.value.forEach((item) => {
  //     let colCount = ref(0)
  //     for (let i of item.layout) {
  //       colCount.value++
  //       if (i !== '_') {
  //         count.value++
  //         rowColSit.value.push({
  //           num: count.value,
  //           row: item.id,
  //           col: seatNumber.value[colCount.value],
  //         })
  //         if (i === 'o') hasBeenSelectedSeat.value.push(count.value)
  //       }
  //     }
  //   })
  // },
  { immediate: true }
)
</script>

<style scoped>
.introduce__wei {
  font-size: 17px;
}
.introduce__location {
  margin-top: 5px;
  font-size: 15px;
}
.introduce__location-button {
  margin: 20px auto;
}
.introduce_select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 140px;
  margin: 5px 0px 0 0;
}
.introduce_select img {
  width: 30px;
  height: 30px;
  object-fit: cover;
}
.introduce {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 0;
  right: 20px;
}
.front-indicator.active {
  background-color: #3a78c3;
  color: #fff;
}
/* #E6CAC4 */
.airplane-seat-number__string-seat-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 10px 10px 0;
  /* background-color: #3a78c3; */
  border-radius: 5px;
  color: #333;
  /* cursor: pointer; */
}
.wrapper {
  position: relative;
  width: 50%;
  height: 50%;
}
#seat-map {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.airplane-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 500px;
  margin-left: -50px;
  overflow-y: auto;
}
.airplane-seat-number {
  display: flex;
  justify-content: space-around;
}
.airplane-seat-number__id {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  /* background-color: red; */
  margin: 0 5px 5px 0;
}

.airplane-seat-number__string.theShippingSpace {
  background: url('@/assets/image/423349728e7bcc7494a99908c0d0e4f.jpg') 100% /
    cover no-repeat;
  cursor: pointer;
}
.airplane-seat-number__string.cargoReservation {
  background: url('@/assets/image/59deb2f081224d53c935d96b22c0572.jpg') 100% /
    cover no-repeat;
  cursor: not-allowed;
}
.airplane-seat-number__string.selectedShippingSpace {
  background: url('@/assets/image/05b1eadc36271b1b0f5302e789ab025.jpg') 100% /
    cover no-repeat;
  cursor: pointer;
}

.airplane-seat-number__string {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 10px 10px 0;
  /* background-color: #3a78c3; */
  /* background: url('@/assets/image/05b1eadc36271b1b0f5302e789ab025.jpg') 100% /
    cover no-repeat; */
  border-radius: 5px;
  color: #fff;
}

body {
  font-family: 'Lato', sans-serif;
}
a {
  color: #b71a4c;
}
ul li {
  list-style: none;
}
.front-indicator {
  width: 145px;
  margin: 5px 32px 15px 32px;
  background-color: #f6f6f6;
  color: #adadad;
  text-align: center;
  padding: 3px;
  border-radius: 5px;
  cursor: pointer;
}
.wrapper {
  width: 100%;
  text-align: center;
}
.container {
  display: flex;
  margin: 0 auto;
  width: 500px;
  text-align: left;
}
.booking-details {
  float: left;
  text-align: left;
  margin-left: 35px;
  font-size: 12px;
  position: relative;
  height: 401px;
}
.booking-details h2 {
  margin: 25px 0 20px 0;
  font-size: 17px;
}
.booking-details h3 {
  margin: 5px 5px 0 0;
  font-size: 14px;
}
div.seatCharts-cell {
  color: #182c4e;
  height: 25px;
  width: 25px;
  line-height: 25px;
}
div.seatCharts-seat {
  color: #ffffff;
  cursor: pointer;
}
div.seatCharts-row {
  height: 35px;
}
div.seatCharts-seat.available {
  background-color: #b9dea0;
}
div.seatCharts-seat.available.first-class {
  /* 	background: url(vip.png); */
  background-color: #3a78c3;
}
div.seatCharts-seat.focused {
  background-color: #76b474;
}
div.seatCharts-seat.selected {
  background-color: #e6cac4;
}
div.seatCharts-seat.unavailable {
  background-color: #ccc;
}
div.seatCharts-container {
  border-right: 1px dotted #adadad;
  width: 200px;
  padding: 20px;
  float: left;
}
div.seatCharts-legend {
  padding-left: 0px;
  bottom: 0;
}
ul.seatCharts-legendList {
  padding-left: 0px;
}
span.seatCharts-legendDescription {
  margin-left: 5px;
  line-height: 30px;
}
.checkout-button {
  display: block;
  margin: 10px 0;
  font-size: 14px;
}
#selected-seats {
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 170px;
}
div.seatCharts-container {
  /*min-width: 700px;*/
}
div.seatCharts-cell {
  height: 16px;
  width: 16px;
  margin: 3px;
  float: left;
  text-align: center;
  outline: none;
  font-size: 13px;
  line-height: 16px;
  color: blue;
}
div.seatCharts-seat {
  background-color: green;
  color: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: default;
}
div.seatCharts-seat:focus {
  border: none;
}
.seatCharts-seat:focus {
  outline: none;
}

div.seatCharts-space {
  background-color: white;
}
div.seatCharts-row {
  height: 50px;
}

div.seatCharts-row:after {
  clear: both;
}

div.seatCharts-seat.selected {
  background-color: aqua;
}

div.seatCharts-seat.focused {
  background-color: #6db131;
}

div.seatCharts-seat.available {
  background-color: green;
}

div.seatCharts-seat.unavailable {
  background-color: red;
  cursor: not-allowed;
}

ul.seatCharts-legendList {
  list-style: none;
}
li.seatCharts-legendItem {
  margin-top: 10px;
  line-height: 2;
}
</style>
